import React, { useEffect }  from "react";
import { observer } from 'mobx-react';
import { Link,useParams } from "react-router-dom";
import BookStore from '../stores/BookDataStore';

const AboutBook = observer(() => {
  const {id} = useParams();
    useEffect(() => {
          BookStore.fetchBooksById(id);
          // const timer = setInterval(() => {
          //     BookStore.fetchBooksById();
          // }, 5000);
          // return () => {
          //     clearInterval(timer);
          // }
  
      }, []) 
      if(BookStore.isLoading){
          return <h1>加载中...</h1>
      }
      if(BookStore.error){
          return <h1>加载失败:{BookStore.error}</h1>
      }

  return (
    <div className="aboutbook">
      <Link to="/">
        <button>主页</button>
      </Link>
      <Link to="/Blog">
        <button>博客列表</button>
      </Link>
      <h1>书籍详情</h1>
      {BookStore.about ? (
        <div>
          <p>书籍名称：{BookStore.about.name}</p>
          <p>作者：{BookStore.about.author}</p>
          <p>备注：{BookStore.about.content}</p>
        </div>
      ):(
        <h1>没有找到该书籍</h1>
      )}
    </div>
  );
});

export default AboutBook;